<template>

<div>
    <div class="title"> §科室管理</div>
    <br>
    <div class="search">
        科室搜索：<input type="text" v-model="value" placeholder="请输入科室名称/关键词">
        <button @click="returnAll">返回</button>
        <button @click="searchDepartInfo">搜索</button>
    </div>
    <div>
        <button @click="bulkDetetion" class="bulk-detetion">-- 批量删除</button>
        <button @click="addInfo" class="add-info">+ 添加</button>
    </div>
    <br>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
            fixed
            prop="departmentId"
            label="科室ID"
            width="70"
            >
            </el-table-column>
            <el-table-column
            prop="departmentName"
            label="科室名称"
            width="90">
            </el-table-column>
            <el-table-column
            prop="departmentIntro"
            label="简介"
            width="230">
            </el-table-column>
            <el-table-column
            prop="departmentStatus"
            label="是否启用"
            width="80">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.departmentStatus"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeStatus(scope.row)">
                </el-switch>
            </template>
            </el-table-column>
            <el-table-column
            prop="departmentIsShow"
            label="是否展示"
            width="80">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.departmentIsShow"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeShow(scope.row)">
                </el-switch>
            </template>
                
            </el-table-column>
            <el-table-column
            prop="departmentUpdateTime"
            label="更新时间"
            width="160">
            </el-table-column>
            <el-table-column
            prop="departmentCreateTime"
            label="创造时间"
            width="160">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button @click="alterClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="open(scope.row)" style="color:red" type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
    </el-table>
    <el-pagination
        background
        @current-change="handleCurrentChange"  
        :current-page="page.currentPage" 
        :page-size="page.pageSize"
        layout="prev, pager, next"
        :total="page.total"
         >
    </el-pagination>

    <el-dialog 
        title="修改科室" 
        :show-close="false"
        :visible.sync="dialogVisible"
        width="500px"
        >
        <el-form ref="form" :model="nowDepart" label-width="80px">
            <el-form-item label="科室id:">
                <div style="float:left">{{nowDepart.departmentId}}</div>
                
            </el-form-item>
            <el-form-item label="科室名称">
                <el-input v-model="nowDepart.departmentName"></el-input>
            </el-form-item>
            <el-form-item label="简介">
                <el-input v-model="nowDepart.departmentIntro"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="sureCommit">确 定</el-button>
        </span>
    </el-dialog>
    
    <el-dialog 
            title="批量删除" 
            :show-close="false"
            :visible.sync="deteleVisible"
            width="500px"
            >
            <template >
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedDepart">
                    <el-checkbox class="el-checkbox-width" v-for="depart in departOptions" :label="depart" :key="depart">{{depart}}</el-checkbox>
                </el-checkbox-group>
                <el-button class="deleteBtn" @click="commitBelete">确定</el-button>
                <el-button class="deleteBtn" @click="cancelCommit">取消</el-button>
            </template>
    </el-dialog>
    
    <el-dialog title="添加科室" width="40%" :visible.sync="dialogFormVisible">
        <el-form :model="form" status-icon :rules="rules" ref="form">
            <el-form-item label="科室名称" prop="departName" :label-width="formLabelWidth">
                <el-input v-model="form.departName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父级科室" prop="fatherDepart" :label-width="formLabelWidth">
                <el-input placeholder="若无父级科室填无或者是没有" v-model="form.fatherDepart" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth">
                <el-radio v-model="status" label="1">是</el-radio>
                <el-radio v-model="status" label="2">否</el-radio>
            </el-form-item>
            <el-form-item label="是否展现" :label-width="formLabelWidth">
                <el-radio v-model="show" label="1">是</el-radio>
                <el-radio v-model="show" label="2">否</el-radio>
            </el-form-item>
            <el-form-item label="科室简介" prop="departInfo" :label-width="formLabelWidth">
                <el-input  v-model="form.departInfo" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('form')">重 置</el-button>
            <el-button type="primary" @click="addCommit">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
    const departOptions = []
    export default {
        data() {
            return {
                checkAll: false,
                checkedDepart: [],//已经选择的
                departOptions: departOptions,//可选择的项
                isIndeterminate: true,
                deteleVisible:false,
                dialogVisible:false,
                tableData:[],
                value: "",
                nowDepart:{
                    departmentId:0,
                    departmentName:"",
                    departmentIntro:""  
                },
                page:{
                    currentPage: 1,  
                    pageSize:5,
                    total:0
                },
                dialogFormVisible: false,
                form: {
                    departName: '',
                    fatherDepart: '',
                    departInfo: '',
                },
                status: '1',
                show:'1',
                formLabelWidth: '120px',
                isSearch:0,
                rules:{
                    departName:[
                        { required: true, message: '请输入科室名称',  trigger: 'blur' }
                    ],
                    fatherDepart:[
                        { required: true, message: '请输入父级科室',  trigger: 'blur' }
                    ],
                    departInfo:[
                        { required: true, message: '请输入科室信息',  trigger: 'blur' }
                    ],
                }
            }
        },
        created(){
            this.getAllDepart();
        },
        methods:{
            handleCheckAllChange(val) {
                this.checkedDepart = val ? detailsOptions : [];
                this.isIndeterminate = false;
            },
            cancelCommit(){
                this.deteleVisible = false;
                this.dialogFormVisible = false
            },
            commitBelete(){
                let params = "";
                for(var i = 0;i <this.checkedDepart.length;i++){
                    if(i!=this.checkedDepart.length-1){
                        params = params + this.checkedDepart[i] + "，";
                    }else{
                        params = params + this.checkedDepart[i]
                    }
                }
                
                this.$axios.get(
                    '/depart/commitDelete',{
                        params:{
                            checkedDepart:params
                        }

                    }
                ).then(res=>{
                    if(res != undefined){
                        if(res.code == 1){
                            this.deteleVisible = false;
                            this.$message({
                                message: '批量删除成功！',
                                type: 'success'
                            });
                            this.getAllDepart();
                            this.getAllDepartName();
                        }else{
                            this.$message.error('删除失败！');
                        }                        
                    }

                })
            },
            getAllDepartName(){
                this.$axios.post(
                    '/depart/getAllDepartName',
                ).then(res =>{
                    // cityOptions = res.data
                    if(res != undefined){
                        console.log("科室名称",res)
                        if(departOptions.length!=0){
                            departOptions.length = 0;    
                        }
                        for(const item of res.data){
                            departOptions.push(item)
                        }                        
                    }

                })
            },
            bulkDetetion(){
                this.deteleVisible = true
            },
            getAllDepart(){
                this.$axios.post(
                    '/depart/getAllDepart',
                    {
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                ).then(res =>{
                    if(res != undefined){
                        if(res.code == 1){
                            console.log("科室列表",res)
                            this.tableData = res.data.list
                            this.page.total = res.data.totalSize
                            console.log('tableData',this.tableData)
                            this.getAllDepartName()
                        }else{
                            alert("服务器出错")
                        }                        
                    }

                    
                })
            },
            handleCurrentChange(newPage) {  
                // console.log(`当前页码变更为：${newPage}`);  
            //    在这里可以根据新的页码进行数据的加载或其他操作  
                this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  
            // 例如，你可能需要发送一个请求来获取新页码对应的数据  
                if(this.isSearch == 0){
                    this.getAllDepart();   
                }else if(this.isSearch == 1){
                    this.searchDepartInfo();
                }
                 
            },
            alterClick(row) {
                this.nowDepart = row
                this.dialogVisible = true
            },
            changeStatus(row){
                this.$axios.post(
                    
                    '/depart/changeStatus',
                    {
                        proStatus:row.departmentStatus,
                        departId:row.departmentId
                    }
                ).then(res=>{
                    console.log(res)
                })
                
            },
            changeShow(row){
                this.$axios.post(
                    
                    '/depart/changeShow',
                    {
                        proShow:row.departmentIsShow,
                        departId:row.departmentId
                    }
                ).then(res=>{
                    console.log(res)
                })
            },
            searchDepartInfo(){
                this.isSearch == 1
                this.$axios.get(
                    '/depart/searchDepartInfo',
                    {
                        params:{
                            value:this.value,
                            pageCurr:this.page.currentPage,  
                            pageSize:this.page.pageSize,
                        }
                    }
                ).then(res =>{
                    if(res != undefined){
                        console.log("科室搜索",res)
                        this.tableData = res.data.list
                        this.page.total = res.data.list.totalSize                        
                    }

                })
            },
            returnAll(){
                this.value = ''
                this.getAllDepart();
            },
            cancel(){
                this.dialogVisible = false,
                this.getAllDepart();
            },
            sureCommit(){
                this.dialogVisible = false,
                this.$axios.get(
                    '/depart/alterDepart',
                    {
                        params:{
                            departId:this.nowDepart.departmentId,
                            departName:this.nowDepart.departmentName,
                            departIntro:this.nowDepart.departmentIntro
                        }
                    }
                ).then(res=>{
                    if(res != undefined){
                        console.log("修改科室",res)
                        if(res.code == 2){
                            alert("暂未修改")
                        }else if(res.code == 1){
                            alert("修改成功")
                        }else{
                            alert("服务器出错，请稍后再来")
                        }                        
                    }

                    
                })
            },
            deleteDepart(row){
                this.$axios.get(
                    '/depart/deleteDepart',
                    {
                        params:{
                            departId:row.departmentId
                        }
                    }
                ).then(res=>{
                    console.log("删除菜单",res)
                })
            },
            open(row) {
                this.$confirm('此操作将删除该科室, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteDepart(row),
                    this.$message({
                        type: 'success',
                        message: '删除成功!请更新一下'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            addInfo(){
                this.dialogFormVisible=true;
            },
            // 重置表单内容
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            addCommit(){
                var departmentParentId;
                this.dialogFormVisible = false;
                // 判断一下是否有写父级菜单，没有则它自己就是父级菜单，有则查找父级菜单
                if(this.form.fatherDepart == '无' || this.form.fatherDepart == '没有'){
                    departmentParentId = 0;
                    this.addDepartCommit(departmentParentId);
                }else{
                    this.$axios.get(
                        '/depart/selectDepartId',
                        {
                            params:{
                                fatherDepart:this.form.fatherDepart
                            }
                        }
                    ).then(res=>{
                        if(res != undefined){
                            console.log(res)
                            if(res.code == 1){
                                //返回1说明父级菜单存在！
                                departmentParentId = res.data.departmentId
                                this.addDepartCommit(departmentParentId)
                            }else{
                                // 返回-1则说明父级菜单不存在
                                this.$message.error('所填写的父级菜单不存在，请重新输入！！！');
                            }                            
                        }

                    })
                }
                
            },
            addDepartCommit(departmentParentId){
                alert(this.form.departName)
                this.$axios.get(
                    '/depart/addDepartCommit',
                    {
                        params:{
                            departName:this.form.departName,
                            departmentParentId:departmentParentId,
                            status:this.status,
                            show:this.show,
                            departInfo:this.form.departInfo
                        }
                    }
                ).then(res=>{
                    if(res != undefined){
                        if(res.code == 1){
                                this.$message({
                                message: '科室添加成功',
                                type: 'success'
                            });
                            this.getAllDepart();
                            this.getAllDepartName();
                        }else{
                            this.$message.error('科室添加失败，请稍后再来');
                        }                        
                    }

                    
                })
            }


        }
    }
</script>
<style>

.searchBtn button:hover{
    cursor: pointer;
    background-color:rgb(125, 187, 249);
}

.deleteBtn{
    background-color: rgb(44, 143, 242);
    color:white;
}
.deleteBtn:hover{
    cursor: pointer;
    background-color: rgb(125, 187, 249);
}
.el-form-item{
    height: 30px;
    line-height: 30px;
}
@import "../../static/css/btnStyle.css"
</style>